<template>
	<view class="operate-layout">
		<!-- 顶部菜单导航 -->
		<view class="top-box">
			<view :style="{height:systemStore.sysInfo.statusBarHeight + 'px'}"></view>
			<view class="nav-box">
				<image class="nav-icon" :src="channelStore.channelTypeRedIcon" mode="aspectFit"></image>
			</view>
			<view class="menu-box">
				<uv-tabs :list="list" :activeStyle="{color:'#5F56EF',fontSize:'32rpx'}" :inactiveStyle="{color:'#666666',fontSize:'32rpx'}" :itemStyle="{height:'40px'}" lineColor="#5F56EF" @click="selectItem"></uv-tabs>
			</view>
		</view>
		<view :style="{paddingTop:systemStore.sysInfo.statusBarHeight + 90 + 'px'}">
			<xh-trade ref="tradeRef" v-if="selectType == '交易'"></xh-trade>
			<xh-income ref="incomeRef" v-if="selectType == '收益'"></xh-income>
			<xh-device ref="deviceRef" v-if="selectType == '机具'"></xh-device>
			<xh-policy ref="policyRef" v-if="selectType == '政策'"></xh-policy>
			<xh-agent ref="agentRef" v-if="selectType == '代理'"></xh-agent>
		</view>
	</view>
</template>

<script setup>
	import { onLoad ,onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useChannelStore,useSystem } from '@/common/stores'
	
	import XhIncome from './widget/xh-income/xh-income.vue'
	import XhTrade from './widget/xh-trade/xh-trade.vue'
	import XhDevice from './widget/xh-device/xh-device.vue'
	import XhPolicy from './widget/xh-policy/xh-policy.vue'
	import XhAgent from './widget/xh-agent/xh-agent.vue'
	const list = ref([{name: '交易'}, {name: '收益'},{name: '机具'}, {name: '政策'}, {name: '代理'}])
	const channelStore = useChannelStore()
	const systemStore = useSystem()
	const selectType = ref('交易')
	const tradeRef = ref(null)
	const incomeRef = ref(null)
	const deviceRef = ref(null)
	const policyRef = ref(null)
	const agentRef = ref(null)
	const selectItem = (item) => {
		selectType.value = item.name
	}
	onShow(()=>{
		if(tradeRef.value){
			tradeRef.value.reloadData()
		}
		else if(incomeRef.value){
			incomeRef.value.reloadData()
		}
		else if(deviceRef.value){
			deviceRef.value.reloadData()
		}
		else if(policyRef.value){
			policyRef.value.reloadData()
		}
		else if(agentRef.value){
			agentRef.value.reloadData()
		}
	})
	onLoad(() => {
	})
	
</script>

<style lang="scss" scoped>
	.operate-layout {
		background-color: white;
		.top-box{
			background-color: #ffffff;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99999;
			.nav-box{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 44px;
				.nav-icon{
					width: 128rpx;
					height: 56rpx;
				}
			}
			.menu-box{
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>